<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sss{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test">
    </div>
</body>
<!-- 引入依赖 引入的时候，必须就按照这个步骤-->
<script src="../React-js/react.development.js" type = "text/javascript"></script>
<script src = "../React-js/react-dom.development.js" type = "text/javascript"></script>
<script src="../React-js/babel.min.js" type="text/javascript"></script>

<!-- 开始编写逻辑代码 

    //1.定义虚拟DOM，不能使用“”
    //2.标签中混入JS表达式的时候使用{}
    //3.样式的类名指定不要使用class，使用className
    //4.内敛样式要使用style={{样式:"值"}}
    //5.不能有多个根标签，只能有一个跟标签
    //6.标签必须闭合
    //7.如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错
    // 如果是大写字母开头，react就去渲染对应的组件，如果没有就报错
-->


<script type="text/babel">
    const myId = "tiTle";
    const myData = "sdod";
    const data = ["1","2","3"];

    const VDOM = (
        <div>
            <h1 id = {myId.toLocaleLowerCase()}>
                <span className = "sss" style = {{fontSize:'50px'}}>
                    {myData}
                </span>
            </h1>
            <ul>
                {
                    // {}里面只能放表达式
                    //如果渲染的是一个列表，每一行必须要有一个key
                    data.map((item,index)=>{
                        return <li key = {index}>{item}</li>
                    })
                }
            </ul>
        </div>
        
    )
    

    ReactDOM.render(VDOM,document.getElementById("test"))
</script>
</html>